<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="searchForm">
                <el-form-item>
                    <el-input v-model="searchForm.keyword" placeholder="寻主消息名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="getSearchMasterMsgs">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handle">处理</el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <!--列表-->
        <el-table :data="searchMasterMsgs" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column type="index" width="60">
            </el-table-column>
            <el-table-column prop="name" label="名称" >
            </el-table-column>
            <el-table-column prop="title" label="标题" >
            </el-table-column>
            <el-table-column prop="price" label="价格" >
            </el-table-column>
            <el-table-column prop="age" label="年龄"  >
            </el-table-column>
            <el-table-column prop="gender" label="性别"  >
                <template scope="scope" >
                    <span v-if="scope.row.gender==0" style="color: red">母</span>
                    <span v-if="scope.row.gender!=0" style="color: green">公</span>
                </template>
            </el-table-column>
            <el-table-column prop="coatColor" label="毛色"  >
            </el-table-column>
            <el-table-column prop="address" label="地址"  >
            </el-table-column>
            <el-table-column prop="petType" label="品种"  >
            </el-table-column>
            <el-table-column prop="userId" label="用户"  >
            </el-table-column>
            <el-table-column prop="shopId" label="店铺"  >
            </el-table-column>

            <el-table-column label="操作" width="200">
                <template scope="scope">
                    <el-button size="small" @click="successSubmit(scope.row)">通过</el-button>
                    <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">驳回</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:right;">
            </el-pagination>
        </el-col>
    </section>
</template>

<script>
    /*引入富文本编辑器 + 它的样式*/
    import { quillEditor } from "vue-quill-editor"; //调用编辑器
    import 'quill/dist/quill.core.css';
    import 'quill/dist/quill.snow.css';
    import 'quill/dist/quill.bubble.css';
    /*引入富文本编辑器集成FastDfsjs控件*/
    /*import quillConfig from '../../common/js/quill-config.js'*/

    export default {
        components: {
            quillEditor
        },
        data() {
            return {
                quillOption: null,
                fileList:[],
                title:'',
                searchForm: {
                  pagesize:10,
                  currentPage: 1,
                  keyword: ''
                },
                searchMasterMsgs: [],
                total: 0,
                page: 1,
                sels: [],//列表选中列

                editFormVisible: false,//编辑界面是否显示

                //编辑界面数据
                editForm: {
                    id: null,
                    name: '',
                    costprice: 0,
                    saleprice: 0,
                    resources:'',
                    type_id:0,
                    shop_id:0,
                    search_master_msg_id:0,
                    detail:{
                        intro:'',
                        adoptNotice:''
                    }
                },

                addFormVisible: false,//新增界面是否显示
                addLoading: false,
                addFormRules: {
                    name: [
                        { required: true, message: '请输入姓名', trigger: 'blur' }
                    ]
                }

            }
        },
        methods: {
          successSubmit(row){
            this.$confirm('确认提交吗？', '提示', {}).then(() => {
              var para = {
                id: row.id
              }
              console.log(para);
              this.$http.post('/searchMasterMsg/success',para).then(res=>{
                console.log(res);
              })
            })

          },
            handleCurrentChange(val) {
                this.page = val;
                this.getSearchMasterMsgs();
            },
            //获取用户列表
            getSearchMasterMsgs() {
                let para = {
                    pagesize: this.searchForm.pagesize,
                    currentPage: this.searchForm.currentPage,
                    keyword:this.searchForm.keyword
                };
                //打开加载的效果
               // this.listLoading = true;
                this.$http.post("/searchMasterMsg",para).then(res=>{
                  console.log(res);
                  this.searchMasterMsgs=res.data.query;
                    this.total=res.data.tatal;
                    //关闭加载的效果
                    this.listLoading = false;
                });
            },
            selsChange: function (sels) {
                this.sels = sels;
            },

        },
        mounted() {
            //当页面加载完以后。执行的方法
            this.getSearchMasterMsgs();
        }
    }

</script>

<style scoped>

</style>